<template>
  <view class="uni-form-item uni-column">
    <input
      v-if="src"
      name="cover"
      :value="src"
      @input="$emit('input', $event.target.value)"
      style="display: none"
    />
    <view class="flex-1">
      <view class="image-box" @click="choosePhoto">
        <view v-if="!src" class="icon-box">
          <!-- <text
						class="dyicon icon-a-tianjiashangchuantupian image-icon"
						style="font-size: 30px"
					></text> -->
          <text class="image-icon" style="font-size: 52px">+</text>
        </view>
        <image
          v-if="src"
          class="shop-logo"
          :src="src"
          :mode="imageMode"
        ></image>
      </view>
      <p v-if="tip" style="font-size: 12px; color: #aaa">
        {{ tip }}
      </p>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'upload-image',
    //用来告诉组件自己依赖的数据和调用的方法
    model: {
      prop: 'modelValue',
      event: 'change',
    },
    props: {
      modelValue: {
        type: String,
        default: '',
        require: true,
      },
      action: {
        type: String,
        default: 'https://gateway.wxls.pro/admin/apiPass/upload/0',
        require: true,
      },
      tip: {
        type: String,
        default: '',
      },
      imageMode: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        src: this.modelValue,
      };
    },
    watch: {
      modelValue(newVal) {
        this.src = newVal;
      },
    },
    mounted() {},
    methods: {
      choosePhoto() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          success: (res) => {
            uni.showLoading();
            uni.uploadFile({
              url: this.action,
              filePath: res.tempFilePaths[0],
              name: 'file',
              success: (uploadFileRes) => {
                uni.hideLoading();
                this.src = JSON.parse(uploadFileRes.data).imgUrl;
                this.$emit('change', JSON.parse(uploadFileRes.data).imgUrl);
              },
              fail(err) {
                uni.hideLoading();
                uni.showToast({
                  title: '上传图片失败！',
                  duration: 2000,
                  icon: 'none',
                  mask: true,
                });
              },
            });
          },
          fail: (err) => {
            uni.showModal({
              title: '选取图片失败',
              content: JSON.stringify(err),
              showCancel: false,
              confirmText: '我知道了',
            });
          },
        });
      },

      handleInput(event) {
        this.$emit('input', event);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .image-box {
    width: 130px;
    height: 130px;
    display: inline-block;
    text-align: center;
    outline: none;
    cursor: pointer;
    line-height: 128px;
    vertical-align: top;
    .icon-box {
      width: 100%;
      height: 100%;
      color: #aaa;
      // background-color: #fff;
      border: 2px dashed #aaa;
      border-radius: 5px;
      box-sizing: border-box;
    }
    .shop-logo {
      width: 100%;
      height: 100%;
      border: 2px dashed rgb(217, 217, 217);
      border-radius: 5px;
    }
  }
</style>
